<template>
  <div class="lx_myorder">
    <div>
      <van-nav-bar title="我的订单" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div style="margin-top: 20px">
      <form action="/">
        <van-search
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
          @cancel="onCancel"
        />
      </form>
    </div>
    <div style="margin-top: 20px">
      <van-tabs v-model:active="active">
        <van-tab title="全部订单" />
        <van-tab title="已确认" />
        <van-tab title="待支付" />
        <van-tab title="退款中" />
      </van-tabs>

      <!-- Pull to Refresh and Load More Orders -->
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <template v-for="item in filteredList" :key="item._id">
            <div v-if="active === 0 || active === item.status">
              <div class="order_content">
                <div class="order_img">
                  <img :src="item.img" alt="" />
                </div>
                <div class="order_text">
                  <p style="margin-top: 5px">{{ item.name }}</p>
                  <p style="margin-top: 10px">
                    {{ item.cate }}<span>{{ item.roomNum }}居</span><span>{{ item.badNum }}床</span
                    ><span>{{ item.home_km }}</span>
                  </p>
                  <p style="margin-top: 10px">{{ formattedTime(item.time) }}</p>
                </div>
              </div>
            </div>
          </template>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { ref, onMounted, computed } from 'vue'
import { showToast } from 'vant'
import axios from 'axios'

// State Variables
const value = ref('')
const active = ref(0)
const list = ref([])
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const page = ref(1)
const pagesize = ref(3)

// Handlers
const onClickLeft = () => history.back()
const onCancel = () => showToast('取消')

const onLoad = () => {
  loading.value = true

  if (refreshing.value) {
    list.value = []
    refreshing.value = false
  }
  setTimeout(async () => {
    await axios
      .get(
        `http://localhost:3000/lx/rental?page=${page.value}&pagesize=${pagesize.value}&name=${value.value}`
      )
      .then((res) => {
        console.log(res.data)

        if (res.data.data.length < pagesize.value) {
          list.value = [...list.value, ...res.data.data]
          finished.value = true
        } else {
          list.value = [...list.value, ...res.data.data]
          loading.value = false
        }
      })
    page.value++
  }, 1000)
}

const onSearch = () => {
  finished.value = false
  page.value = 1
  loading.value = true
  onLoad()
  list.value = []
  value.value = ''
}

const onRefresh = () => {
  finished.value = false
  page.value = 1
  loading.value = true
  onLoad()
}

const formattedTime = (time: string) => {
  return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
}

// Filter List based on the active tab
const filteredList = computed(() => {
  return list.value.filter((item) => active.value === 0 || active.value === item.status)
})

// Initial Load
onMounted(() => {
  onLoad()
})
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}

.lx_myorder {
  width: 100vw;
  height: 100vh;
  background: #f4f6f9;
}

.order_content {
  width: 95vw;
  height: 130px;
  background: #fff;
  margin-top: 20px;
  margin-left: 10px;
  box-shadow: 4px 4px 10px 0 rgba(210, 210, 210, 0.5);
  border-top-left-radius: 5px;
  display: flex;
  justify-content: space-between;
}

.order_img {
  width: 120px;
  height: 130px;
}

.order_text {
  width: 230px;
  height: 130px;
}

.order_img img {
  width: 120px;
  height: 130px;
  border-top-left-radius: 5px;
}

.order_text span {
  margin-left: 10px;
}
</style>
